<template>
  <a-spin :spinning="loading">
    <!-- 标题 -->
    <div class="modal-header">
      <div class="modal-title">
        <span>{{ l('ReName') }}</span>
      </div>
    </div>
    <div class="modal-body">
      <a-input :placeholder="l('ReName')" v-model:value="name" />
    </div>
    <!-- 按钮 -->
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" type="button">
        <close-circle-outlined />
        {{ l('Cancel') }}
      </a-button>
      <a-button :loading="saving" :type="'primary'" @click="handleSubmit">
        <save-outlined />
        {{ l('Save') }}
      </a-button>
    </div>
  </a-spin>
</template>

<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { SysFileServiceProxy } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  import { SysFileEditDto, SysFileListDto } from '/@/shared/service-proxies/service-proxies';
  import { CloseCircleOutlined, SaveOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    name: 'rename',
    components: {
      CloseCircleOutlined,
      SaveOutlined,
    },
    mixins: [ModalComponentBase],
    props: {
      item: SysFileListDto,
    },
    data() {
      return {
        name: '',
        sysFileServiceProxy: new SysFileServiceProxy(),
      };
    },
    mounted() {
      this.name = this.item?.name as string;
    },
    methods: {
      /**
       * 提交数据
       */
      handleSubmit() {
        this.loading = true;
        let sysFileDto: SysFileEditDto = new SysFileEditDto();
        sysFileDto.name = this.name;
        sysFileDto.id = this.item?.id;
        sysFileDto.dir = this.item?.dir as boolean;
        sysFileDto.fileName = this.name;
        sysFileDto.parentId = this.item?.parentId;
        this.sysFileServiceProxy
          .reFileName(sysFileDto)
          .finally(() => {
            this.loading = false;
          })
          .then((res) => {
            console.log(res);
            this.notify.success(this.l('SavedSuccessfully'));
            this.success(true);
          });
      },
    },
  });
</script>
